html {
  word-break: break-word;
  text-rendering: optimizeLegibility;
  color: var(--wf-text-color);
  background-color: var(--wf-page-background-color);
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: auto;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#root {
  font-size: 12px;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/************************ 布局容器 **************************/
.main-layout {
  /*左右布局*/
  &.left-right {
    display: flex;
    flex: none;
    margin: 0 auto;
    padding: 40px 15px;
    max-width: 1300px;
    width: 100%;
    min-height: 100%;
    animation: bottom-top 1s;
    .layout-left {
      flex: 1;
      margin-right: 20px;
      border-radius: 8px;
      background: var(--wf-color-white);
      box-shadow: var(--wf-card-box-shadow);
    }
    .layout-right {
      width: 26%;
    }
  }
  /*左中右，中间宽度弹性布局*/
  &.l-m-r {
    display: flex;
    > .left {
      width: 100px;
      flex: 0 0 100px;
    }
    > .middle {
      flex: 1;
      margin: 0 20px;
    }
    > .right {
      width: 300px;
      flex: 0 0 300px;
    }
  }
}

.card {
  padding: 20px 24px;
  border-radius: 8px;
  background: var(--wf-color-white);
  box-shadow: var(--card-box-shadow);
}

.avatar-img {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: filter 375ms ease-in 0.2s, transform 0.3s;
    object-fit: cover;
  }
}

.img-box {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
